<template>
    <div class="comp" @dblclick="reset">
        <!-- 图表展示区域 -->
       <div class="chart" ref="map"></div>
    </div>
</template>

<script>
// 引入中文转换拼音方法
import getProvinceMapInfo from "../../public/static/map.js"

import mixinData from "../utils/mixin.js"
export default {
    // 混入
    mixins:[mixinData],
    methods:{
        // 1.获取echarts实例  设置基础的静态配置项绘制基础图表
        async initEcharts(){
            // 1.1 获取echarts实例
            this.echartsInstance = this.$echarts.init(this.$refs.map,this.themeName)
            // 1.2获取绘制地图的经纬度数据  点===>线===>面积
            let {data} = await this.$http.get('http://localhost:8080/static/map/china.json')
            // 1.3 注册中国地理经纬度数据 并起别名
            this.$echarts.registerMap('china',data)
            // 1.4 设置基础的静态配置
            let initOptions={
                // 标题
                title:{
                    text:"▍各地区农作物覆盖面积",
                    top:"3%",
                    left:"3%"
                }
            }
            // 1.3 绘制基础图表
            this.echartsInstance.setOption(initOptions)

            // 1.4监听切换省份
            this.echartsInstance.on('click',async (info)=>{
                let {path,name} = getProvinceMapInfo(info.name)
                // 1.5获取省份地址数据 
                let {data} = await this.$http.get('http://localhost:8080'+path)
                // 1.6注册省份数据
                this.$echarts.registerMap(name,data)
                this.echartsInstance.setOption({
                    series:[
                        {
                            map:name,
                            zoom:0.9,
                            center:undefined,//视觉中心点
                            itemStyle:{
                                // 设置面积的填充颜色的
                                areaColor:"orange"
                            },
                            label:{
                                show:true
                            }
                        }
                    ]
                })
            })

            // 2.获取业务数据
            this.getData()
        },
        // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('CropCoverage')
            this.allData = data.content;console.log(data);
            // 根据数据继续绘制图表
            this.setEcharts()
        },
        // 3.根据数据继续绘制图表
        setEcharts(){

            // 3.1生成配置项
            let setOptions={
                // 系列
                series:[
                    {
                        type:"map",//系列类型
                        map:'china',//地图数据别名
                        data:this.allData,//业务数据
                        roam:true,//开启漫游
                        zoom:1.2,//缩放比例
                        top:"17%"
                    }
                ],
                // 数据映射配置
                visualMap:{
                    calculable:true,//是否显示拖拽手柄
                    inRange:{
                        color: ['orange', 'orangered']//映射面积颜色
                    },
                    text:['High', 'Low'],//两端文本
                    // 位置
                    bottom:"2%",
                    left:"3%"
                }
            }

            // 3.2绘制图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.适配方法
        Adaptive(){

            // 获取一个比例尺
            let width = this.$refs.map.offsetWidth;
            // 3.5-3.7
            let scale = width/100*3.6

            // 根据比例尺动态设置标题
            let updateOptions={
                // 标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                }    
            }

            // 使用动态配置绘图
            this.echartsInstance.setOption(updateOptions)

            // 只是赋值坐标系内部的图表大小适配
            this.echartsInstance.resize();
        },
        // 5.还原中国地图
        reset(){
            this.echartsInstance.setOption({
                // 中国数据已经注册过直接示意即可
                series:[
                    {
                        map:'china',
                        zoom:1.2,
                        center:undefined,
                        label:{
                            show:false
                        }
                    }
                    
                ]
            })
        }
    },
    mounted(){
        // 1.获取echarts实例 
        this.initEcharts()
        // 3.监听窗口变化
        window.addEventListener('resize',this.Adaptive)
        // 4.使用适配方法
        this.Adaptive()
    },
    destroyed(){
        // 移除窗口监听 防止内存泄露
        window.removeEventListener('resize',this.Adaptive)
        this.echartsInstance.off('click')
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
